<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>DataTables 滚动加载示例</title>

    <!-- DataTables 样式 -->
    <link rel="stylesheet" type="text/css"
          href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css"/>
    <link rel="stylesheet" type="text/css"
          href="https://cdn.datatables.net/scroller/2.3.0/css/scroller.dataTables.min.css"/>

    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

    <!-- DataTables 脚本 -->
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/scroller/2.3.0/js/dataTables.scroller.min.js"></script>

    <style>
        body {
            font-family: "Microsoft YaHei", sans-serif;
            margin: 40px;
            background: #f7f8fa;
        }
        table {
            width: 80%;
            margin: 0 auto;
            background: white;
            border-radius: 8px;
            overflow: hidden;
        }
    </style>
</head>
<body>

<h2 style="text-align:center;">DataTables 滚动加载（Scroller）示例</h2>

<table id="scrollTable" class="display">
    <thead>
    <tr>
        <th>ID</th>
        <th>姓名</th>
        <th>邮箱</th>
    </tr>
    </thead>
</table>

<script>
    $(document).ready(function() {
        $('#scrollTable').DataTable({
            serverSide: true,        // 服务端模式
            processing: true,        // 显示“加载中”
            ajax: {
                url: 'dataServlet',  // 你的后端接口
                type: 'POST'
            },
            deferRender: true,
            scrollY: 400,            // 表格高度，出现滚动条
            scrollCollapse: true,
            scroller: true,          // 启用滚动加载插件
            columns: [
                { data: 'id' },
                { data: 'name' },
                { data: 'email' }
            ],
            language: {
                url: 'https://cdn.datatables.net/plug-ins/1.13.6/i18n/zh.json'
            }
        });
    });
</script>

</body>
</html>
